<template>
  <div class="account-success">
    <div class="account-success-content">
      <!--恭喜注册成功！-->
      <div class="success-title"><img src="../../assets/images/icon_success.png"/>{{ $t('message.congratulateRegisterSuccess') }}！</div>
      <!--完成 身份认证 ，即可获得分期额度，享受购物分期服务-->
      <div class="success-tip">{{ $t('message.complete') }}<router-link to="/register/authentication/identity">{{ $t('message.theIdentityAuthentication') }}</router-link>{{ $t('message.getCreditAndEnjoy') }}</div>
      <div class="success-btn-group">
        <!--去认证-->
        <button type="button" class="btn btn-orange" @click="toAuthentication">{{ $t('message.goToAuthentication') }}</button>
        <!--前往购物-->
        <button type="button" class="btn btn-white" @click="toHome">{{ $t('message.goShopping') }}</button>
      </div>
    </div>

    <div class="success-guess">
      <div class="guess-title">
        {{$t('message.youLike')}}
      </div>
      <ul class="guess-content">
        <li v-for="(item, index) in products">
          <v-product-item-detail :product="item"></v-product-item-detail>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import VProductItemDetail from '@/components/base/VProductItemDetail'

export default {
  name: 'RegisterAccountSuccess',
  components: {
    VProductItemDetail
  },
  data () {
    return {
      products: []
    }
  },
  methods: {
    toHome () {
      this.$router.push({ path: '/' })
    },
    toAuthentication () {
      this.$router.push({ path: '/register/authentication/identity' })
    }
  },
  created () {
    this.$ajax.registerGuessYouLike().then((res) => {
      if (res.code === 200) {
        this.products = res.data
      } else if (res.code === 202) {
        console.log('请求数据失败数据为空')
      }
    })
  }
}
</script>

<style scoped>
.account-success-content {
  padding: 60px 0;
  background-color: #fff;
}

.success-title {
  height: 30px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}

.success-title img {
  width: 30px;
  height: 30px;
  padding-right: 16px;
}

.success-tip {
  line-height: 26px;
  color: #666;
  text-align: center;
  margin-top: 16px;
}

.success-tip a {
  color: #ff600a;
}

.success-tip a:hover {
  text-decoration: underline;
}

.success-btn-group {
  font-size: 0;
  text-align: center;
  margin-top: 40px;
}

.success-btn-group button {
  margin-right: 40px;
}

.success-btn-group button:last-of-type {
  margin-right: 0;
}

.success-guess {
  width: 1200px;
  margin: 60px auto 0;
}

.guess-title {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #666;
  text-align: center;
  position: relative;
}

.guess-title:before, .guess-title:after {
  content: '';
  display: block;
  width: 530px;
  height: 0;
  border-top: 1px solid #e0e0e0;
  position: absolute;
  top: 11px;
}

.guess-title:before {
  left: 0;
}

.guess-title:after {
  right: 0;
}

.guess-content {
  margin-top: 30px;
  background-color: #fff;
  overflow: hidden;
}

.guess-content li {
  float: left;
  width: 224px;
  margin-right: 20px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.guess-content li:after {
  content: '';
  display: block;
  width: 0;
  height: 120px;
  border-right: 1px solid #e6e6e6;
  position: absolute;
  top: 60px;
  right: -10px;
}

.guess-content li:last-child {
  margin-right: 0;
}
</style>